<script setup>
import request from "@/utils/request";
import {SwipeCell, Cell, Button, Tag, Popup, Dialog} from "vant";
import {ref} from "vue";
import { Local } from "@/utils/storage";
import {deleteActivity, deleteItem} from '@/v-api/addNews'
import router from "@/router";
import ActivityIcon from "@/components/add/ActivityIcon.vue";

const userInfo = Local.get('userInfo')
const item = ref()
const show = ref(false);
const schoolId = 1;
const authorId = userInfo.userId;
request.post(`activity/get?schoolId=${schoolId}&authorId=${authorId}`)
    .then(response => {
      item.value = response.data;
      console.log(item.value)
    })
    .catch(error => {
      console.error(error);
    });

</script>

<template>
  <div class="list">
    <SwipeCell v-for="(item, index) in item" :key="index" class="bg_container">
      <div class="container">
        <div class="title">{{ item.title }}
        </div>
        <div class="content">{{ item.content }}</div>
      </div>
      <template #left>
        <Button square text="删除" icon="delete" class="delete-button" color="#7232dd" plain @click="deleteActivity(item.id)"/>
        <Button square text="编辑" icon="comment" class="delete-button" color="#7232dd" plain @click="router.push({ name:'modifyActivity', params: { title: item.title,content:item.content, id:item.id,picture:item.picture }})"/>
      </template>
    </SwipeCell>
    <ActivityIcon />
    <Popup v-model:show="show" position="top" :style="{ height: '30%' }" />
  </div>
</template>

<style scoped>
.list {
  height: 725px; /* 设置高度为页面可视区域的100% */
  overflow-y: scroll; /* 设置垂直方向的滚动条 */
  background-color: #d3e8d3; /* 设置背景颜色 */
}
.bg_container{
  margin: 15px;
}
.container {
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 修改阴影颜色为黑色 */
  background-color: white;
  height: 200px; /* 调整容器高度，增加了阴影下方的空间 */
  width: 300px;
  margin-bottom: 20px; /* 添加与阴影同样的间距 */
  border: 1px solid black
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px; /* 添加标题和内容之间的间距 */
}

.content {
  font-size: 16px;
  overflow-y: scroll; /* 设置垂直方向的滚动条 */
  height: 150px;
}

.delete-button{
  height: 100%;
  margin-right: 10px;
}
</style>